<script setup lang="ts">
    import LoginBox from '@/components/LoginBox/index.vue';
    import LoginPanel from '@/components/LoginBox/Panel/index.vue';
    import ChatBox from '@/components/ChatBox/index.vue';
    import NoticeBox from '@/components/NoticeBox/index.vue';

    import { ref, onBeforeMount, computed } from 'vue';
    import { userLoginStore, LoginStatus } from '@/stores/login';
    import { useChatStore } from '@/stores/chat';
    import { useMenuStore } from '@/stores/menu';
    import { useUserStore } from '@/stores/user';

    const loginStore = userLoginStore();
    const chatStore = useChatStore();
    const menuStore = useMenuStore();
    const userStore = useUserStore();

    const userInfo = computed(() => userStore.userInfo);
    // 文章标题
    const title = ref('');

    // 搜索
    const search = () => {
        if(!title.value) {
            return false;
        }
        // 路由跳转
        window.location.href = "/seach?p=" + title.value;
    }

    onBeforeMount(() => {
        // 初始化菜单信息
        menuStore.getMenuList();
    });

</script>

<template>
    <header class="header">
        <div class="ui container">
            <h2 class="blog_title">
                <a class="logo" href="/">羅氏博客</a>
            </h2>
            <div class="navbar">
                <el-menu 
                    :router='true' 
                    :ellipsis="false"
                    :default-active="String(menuStore.activeIndex)" 
                    mode="horizontal" 
                    text-color="#252933"
                    active-text-color="#409EFF"
                >
                    <el-menu-item 
                        v-for="(menu, index) in menuStore.menuData" :key="menu.menu_id" :route="menu.menu_url" :index="`${index + 1}`"
                    >
                        {{ menu.menu_name }}
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="oper">
                <!-- 搜索文章 -->
                <div class="blog_select">
                    <el-input v-model="title" style="width: 200px;margin-right: 5px" placeholder="请输入文章标题" @keyup.enter.native="search">
                        <template #suffix>
                            <el-icon class="el-input__icon" @click="search"><Search /></el-icon>
                        </template>
                    </el-input>
                </div>
                <!-- 通知 -->
                <notice-box v-if="loginStore.loginStatus == LoginStatus.Success">
                    <div class="notice">
                        <svg-icon href='#icon-notice' width="14px" height="14px" fill="#75849a"></svg-icon>
                        <div class="tip_count" v-show="userInfo.tj_info && userInfo.tj_info?.notice_num > 0">{{ userInfo.tj_info?.notice_num }}</div>
                        <span>通知</span>
                    </div>
                </notice-box>
                <!-- 私信 -->
                <chat-box v-if="loginStore.loginStatus == LoginStatus.Success">
                    <div class="message" @click="chatStore.isShowChatBox = true">
                        <svg-icon href='#icon-message' width="15px" height="15px" fill="#75849a"></svg-icon>
                        <div class="tip_count" v-show="userInfo.tj_info && userInfo.tj_info?.message_num > 0">{{ userInfo.tj_info?.message_num }}</div>
                        <span>私信</span>
                    </div>
                </chat-box>
                <div class="login_box" v-if="loginStore.loginStatus != LoginStatus.Success">
                    <a @click="loginStore.isShowLoginBox = true">
                        <svg-icon href="#icon-user" width="18px" height="18px" fill="#FFFFFF"></svg-icon>登录
                    </a>
                </div>
                <div class="login_box" v-if="loginStore.loginStatus == LoginStatus.Success">
                    <login-panel>
                        <div class="userIcon">
                            <img class="widget_avatar" :src="userStore.userInfo.avatar" :alt="userStore.userInfo.nickName" />
                        </div>
                    </login-panel>
                </div>
            </div>
        </div>
    </header>
    <!-- 登录 -->
    <LoginBox />
</template>

<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />